<template>
  <div
    class="show3Box"
    :style="{
      width: width + 'px',
      height: '100%',
    }"
  >
    <div class="rotateBox">
      <div class="rotateContent">
		<div class="rotateContentText">
			{{title}}
		</div>
        <div v-for="(item,index) in getNums" :key="index" class="rotateItem">
			{{item}}
		</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  defineEmits,
  onMounted,
  onUpdated,
  computed,
} from "vue";
const props = defineProps({
  width: {
    type: Number,
    default: 600,
  },
  height: {
    type: Number,
    default: 600,
  },
  number: {
    type: Number,
    default: 0,
  },
    title: {
    type: String,
    default:"装配时长(天)",
  },
});
const getNums = computed(()=>{
	let data = String(props.number).split('');
	return data
})
onUpdated(() => {});
</script>

<style scoped>
.show3Box {
  position: relative;
}

.rotateBox {
  width: 600px;
  margin: 100px auto;
  height: 136px;

  position: relative;
}
.rotateContent {
  height: 100%;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.rotateContentText{
font-weight: bold;
font-size: 34px;
color: #D3E4FE;
line-height: 60px;
text-align: center;
}
.rotateItem {
  height: 60px;
  width: 44px;
  position: absolute;
  top: 0;
  left: 230px;
  background-image: url(/vue.example/static/numbg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
 
}
</style>
